<template>
    <view class="container">
        <!-- 消息列表 -->
        <uni-swipe-action>
            <uni-swipe-action-item v-for="message in messages" :key="message.id" :right-options="swipeOptions"
                @click="handleSwipeClick(message)">
                <uni-list-item :title="message.title" :note="message.content" :show-extra-icon="true"
                    :extra-icon="messageIcon" clickable @click="handleMessageClick(message)">
                    <template v-slot:footer>
                        <view class="message-right">
                            <text class="time">{{ message.time }}</text>
                            <uni-badge v-if="message.unread" :text="message.unread" type="error" />
                        </view>
                    </template>
                    <template v-slot:header>
                        <image :src="message.avatar" class="avatar" mode="aspectFill" />
                    </template>
                </uni-list-item>
            </uni-swipe-action-item>
        </uni-swipe-action>
        <tab-bar :current-index="1" />
    </view>
</template>

<script>
    import {
        isLogin
    } from '../../tools/tools';
    import tabBar from '@/components/tabBar.vue';
    export default {
        components: {
            tabBar
        },
        data() {
            return {
                messages: [{
                        id: 1,
                        avatar: '/static/avatar1.jpg',
                        title: '系统通知',
                        content: '您有新的优惠券待领取',
                        time: '10:30',
                        unread: 2
                    },
                    {
                        id: 2,
                        avatar: '/static/avatar2.jpg',
                        title: '订单通知',
                        content: '您的订单已发货',
                        time: '昨天',
                        unread: 0
                    },
                    // 更多消息...
                ],
                messageIcon: {
                    color: '#999',
                    size: '22',
                    type: 'right'
                },
                swipeOptions: [{
                    text: '删除',
                    style: {
                        backgroundColor: '#dd524d'
                    }
                }]
            }
        },
        methods: {
            handleMessageClick(message) {
                console.log('点击消息', message)
                uni.navigateTo({
                    url: '/pages/message/detail?id=' + message.id
                })
            },
            handleSwipeClick(message) {
                this.messages = this.messages.filter(item => item.id !== message.id)
                uni.showToast({
                    title: '删除成功',
                    icon: 'success'
                })
            }
        },
        onShow: () => {
            isLogin()
        }
    }
</script>

<style scoped>
    .container {
        background-color: #f5f5f5;
        min-height: calc(100vh - 100rpx);
        padding: 0 0 100rpx 0;
    }

    .avatar {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        margin-right: 12px;
    }

    .message-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .time {
        font-size: 12px;
        color: #999;
        margin-bottom: 4px;
    }

    /* 调整列表项样式 */
    /deep/ .uni-list-item__container {
        padding: 12px 15px;
    }

    /deep/ .uni-list-item__content {
        margin-left: 10px;
    }
</style>